<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4"><div class="grid-content bg-purple">
           <img src="https://s1.ax1x.com/2022/10/25/xR2XL9.png" alt="">
           <span>联盟转诊管理系统</span>
          </div></el-col>
          <el-col :span="16"><div class="grid-content bg-purple">
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple">
            <div class="headPortrait">
                <!-- 头像 -->
                <div class="centerOf" @click="Toding">
                    <img src="https://s1.ax1x.com/2022/10/19/xsjCcV.png" alt="">
                </div>
                <img src="https://s1.ax1x.com/2022/10/25/xRRhlD.png" alt="" >
                <div class="infor" v-show="ding">
                  <div class="chegatpassword" @click="toshow">
                    <span>修改密码</span>
                  </div>
                  <div class="chegatpassword" @click="exits">
                    <span>退出</span>
                  </div>
                  
                </div>
            </div>
          </div></el-col>
      
        </el-row>
        
      </el-header>
      
    </el-container>
       <!-- 修改密码 -->
       <div class="nav" v-show="modifyThe">
      <div class="head">
        <span>修改密码</span>
        <img src="https://s1.ax1x.com/2022/10/27/xfgm7R.png" alt="" @click="shutDown">
      </div>
      <div class="modify">
        <ul>
          <li>新密码</li>
          <li><input type="text"></li>
          <li>重复密码</li>
          <li><input type="text"></li>
        </ul> 
        <button @click="shutDown">取消</button>
        <button>保存</button>
      </div>
    </div>
    <!-- 退出 -->
    <div class="exit" v-show="exit">
      <div class="head">
        <span>退出提示</span>
        <img src="https://s1.ax1x.com/2022/10/27/xfgm7R.png" alt="" @click="cancel">
      </div>
      <div class="modify">
        <ul>
          <li>确认退出系统吗？</li>
        </ul> 
        <button @click="cancel">取消</button>
        <button @click="determine">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "heads",
  data() {
    return {
      labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
        // 修改密码 退出
        ding:false,
        // 修改密码
        modifyThe:false,
        // 退出
        exit:false
    }
  },
  methods:{
    // 关闭修改密码窗口
    shutDown(){
      this.modifyThe = false;
    },
    // 修改密码
    toshow(){
      this.modifyThe = true
      this.exit = false;
    },
    Toding(){
      this.ding = !this.ding
    },
    exits(){
      this.exit = !this.exit;
    },
    cancel(){
      this.exit =false;
    },
    // 确定退出
    determine(){
      window.localStorage.removeItem('token');
      this.$router.push({
        path:'/login'
      })
    }
  }
};
</script>

<style lang="less" scoped>
// elementui - header
ul li {
  list-style-type: none;
}
.el-header,
.el-footer {
  background-color: #f2f2f2;
  color: #333;
  text-align: center;
  box-shadow:2px 1px 7px rgb(168, 167, 167) ;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
// 分割
.el-row {
    margin-bottom: 20px;
    margin-top: 10px;
    &:last-child {
      margin-bottom: 0px;
    }
  }
  .el-col {
    img{
        margin-top: 5px;
        vertical-align:middle;
        margin-right: 15px;
    }
    span{
        margin-top: 5px;
        display: inline-block;
        line-height:0px;
        vertical-align:middle;
        color: #999999;
    }
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
//   头像相关部分
.headPortrait{
    width: 100px;
    height: 50px;
    margin-top: -5px;
    position: relative;
    .centerOf{
        width: 50px;
        height: 50px;
        background: #fff;
        border:1px solid  #dedede;
        float: left;
        border-radius: 50%;
        
        img{
            width: 25px;
            height: 30px;
            margin: 10px 0 0 1px ;
        }
    }
    img{
        margin-top:20px;
    }
}
// 信息
.infor{
    width: 139px;
    height: 80px;
    position: absolute;
    top: 56px;
    right: 2px;
    z-index: 2;
    .chegatpassword{
      height: 40px;
      background: #f2f2f2;
      display: flex;
      justify-content: center;
      border-top: 2px solid #ccc;
      span{
        color: #333333;
        font-size: 14px;
        margin-top: 20px;
      }
    }
}
.nav{
  z-index: 2;
  width: 224px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -114px 0 0 -140px;
  border: 1px solid #ccc;
  .head{
    height: 25px;
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 3px 5px 0 5px;
    span{
      font-size: 14px;
    }
    img{
      float: right;
    }
  }
  .modify{
    height: 90px;
    margin-top:17px ;
    ul li{
      margin-left: -30px;
    }
    ul li input{
      z-index: 4;
      width: 90%;
    }
  }
  button{
    float: right;
    margin-right: 15px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    width: 65px;
    height: 25px;
    background: #169bd5;
  }
  
}
.exit{
  z-index: 2;
  width: 224px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -114px 0 0 -140px;
  border: 1px solid #ccc;
  .head{
    height: 25px;
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 3px 5px 0 5px;
    span{
      font-size: 14px;
    }
    img{
      float: right;
    }
  }
  .modify{
    height: 130px;
    margin-top:17px ;
    
    ul li{
      margin-left: -30px;
      margin-bottom: 70px;
      display:inline-block;
      margin: 30px 0 30px 25px;
    }
    ul li input{
      z-index: 4;
      width: 90%;
    }
  }
  button{
    float: right;
    margin-right: 15px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    width: 65px;
    height: 25px;
    background: #169bd5;
  }
  
}
</style>